<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" width="500px" append-to-body custom-class="import-dialog">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="型号" prop="modelId">
          <el-select v-model="form.modelId" placeholder="请选择型号" @change="selctLockModel">
            <el-option v-for="item in lockModelList" :key="item.id" :label="item.name" :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备MAC" prop="mac">
          <el-input v-model="form.mac" placeholder="请输入设备MAC"></el-input>
        </el-form-item>
        <el-form-item label="设备名称" prop="lockName">
          <el-input v-model="form.lockName" placeholder="请输入设备名称"></el-input>
          <div class="tips">名称用于小程序租客的门锁密码显示</div>
        </el-form-item>
        <el-form-item label="房间" prop="houseId">
          <el-row>
            <el-col :span="18">
              <el-input v-model="this.form.premisesAddress" placeholder="" style="width: 240px" disabled/>
            </el-col>
            <el-col :span="6">
              <el-button @click="selectHouse">选择</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">保 存</el-button>
      </div>
    </el-dialog>
    <!-- 选择房间弹窗 -->
    <SelectRoom v-model="dialogSelectRoomVisible" @success="selectRoomSuccessCb" :selected-data="selectedList"/>
  </div>
</template>

<script>
import { debounce } from '@/utils'
import { addRoutineSweep } from '@/api/houseCleaning/sweep'
import { listLockModel,createLock } from '@/api/smartLock/lockManage'
import SelectRoom from '@/views/components/select-room/index.vue'

export default {
  components: {
    SelectRoom
  },
  props: {
    title: {
      default: '添加设备'
    },
    value: {
      default: false
    },
    data: {
      default: undefined
    }
  },
  data() {
    return {
      //是否显示选择房间弹窗
      dialogSelectRoomVisible: false,
      //已选择列表
      selectedList: [],
      form: {},
      // 锁型号列表
      lockModelList: [],
      rules: {
        modelId: [
          { required: true, message: '请选择型号', trigger: 'blur' }
        ],
        mac: [
          { required: true, message: '请输入设备MAC', trigger: 'blur' }],

        lockName: [
          { required: true, message: '请输入设备名称', trigger: 'blur' }
        ],
        houseId: [
          { required: true, message: '请选择房间', trigger: 'blur' }
        ]
      },
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      //列表
      list: []
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.init()
        }
      },
      immediate: true
    }
  },
  methods: {
    init() {
      this.reset()
      this.getLockModelList()
    },
    reset() {
      this.form = {
        brandId: null,
        brandName: "",
        modelId: null,
        modelName: '',
        mac: '',
        lockName: '',
        houseId: '',
        premisesAddress: ''
      }
      this.resetForm('form')
      this.selectedList = []
    },
    // 型号锁列表
    getLockModelList() {
      listLockModel().then(response => {
        this.lockModelList = response.data
      }).catch(() => {
        this.lockModelList = []
      })
    },
    // 选择型号
    selctLockModel(modelId) {
      console.log('modelId', modelId)
      let lockModel = this.lockModelList.find(item => item.id == modelId)
      this.form.modelName = lockModel.name
      this.form.brandId = lockModel.brandId
      this.form.brandName = lockModel.brandName
    },
    //选择房间
    selectHouse() {
      this.dialogSelectRoomVisible = true
    },
    //选择房间回调
    selectRoomSuccessCb(data) {
      console.log('data', data)
      this.selectedList = data
      this.form.houseId = data[0].houseId
      this.form.premisesAddress = data[0].premisesAddress
    },
    submitForm: debounce(function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          createLock(this.form).then(response => {
            if (response.code == 200) {
              this.$emit('success')
              this.$message.success(response.msg)
              this.visible = false
            } else {
              this.$message.error(response.msg)
            }
          })
        }
      })
    }, 500,false),
    cancel() {
      this.reset()
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/dialog";
</style>
